<template>
  <div @click="$emit('show-play-bar')">
    <img src="../assets/backicon.svg" class="iconaa" />
    <div class="songName">{{ currentMusic.name }}</div>
    <span class="manName">{{ manName }}</span>
  </div>
</template>

<script>
export default {
  props: ["currentMusic"],
  computed: {
    manName: function () {
      let manName;
      if (this.currentMusic.ar) {
        manName = this.currentMusic.ar[0].name;
      }
      if (this.currentMusic.song) {
        manName = this.currentMusic.song.artists[0].name;
      }
      if (this.currentMusic.artists) {
        manName = this.currentMusic.artists[0].name;
      }
      return manName;
    },
  },
};
</script>

<style >
.iconaa {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 10px;
  left: 10px;
}
.songName {
  position: absolute;
  top: 8px;
  left: 60px;
  font-size: 12px;
  color: #ffffff;
   text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}
.manName {
  position: absolute;
  top: 23px;
  left: 60px;
  font-size: 12px;
  color: #ffffff;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>